<template>
  <div class="icon-container display-flex flex-align flex-justify">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'CoreIconContainer'
})
</script>

<style scoped lang="scss">
.icon-container {
  width: var(--core-header-tools-size);
  height: var(--core-header-tools-size);
  color: var(--core-text-color-05);
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

  &:hover {
    color: var(--core-text-color-03);
    background-color: var(--core-bg-color-04);
  }
}
</style>
